import { ref, reactive, type Ref, onMounted } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import { getWarehouseListApi } from "@/api/warehouseApi";
export function useWarehouseColumns(
  warehouseSelectRef: Ref,
  listArr,
  selectValue
) {
  const warehouseSelectValue = ref("");
  const warehouseColumns: TableColumnList = [
    {
      label: "库房名称",
      prop: "name"
    },
    {
      label: "库房编码",
      prop: "code",
      minWidth: 200
    },
    {
      label: "创建时间",
      prop: "createdAt",
      minWidth: 200
    }
  ];

  /** 分页配置 */
  const warehousePagination = reactive<PaginationProps>({
    pageSize: 10,
    currentPage: 1,
    layout: "prev, pager, next",
    total: 0,
    background: true
  });

  /** 高亮当前选中行 */
  function warehouseRowStyle({ row: { name } }) {
    return {
      cursor: "pointer",
      background:
        name === warehouseSelectValue.value ? "var(--el-fill-color-light)" : ""
    };
  }
  const warehouseDataList = ref([]);
  async function onSearch() {
    const { result } = await getWarehouseListApi();
    warehouseDataList.value = result.list;
    warehousePagination.total = result.total;
  }
  /** 行点击 */
  function warehouseOnRowClick(row, _column, _event, did) {
    selectValue[did - 1].warehouseSelectValue = row.name;
    console.log(row.name);
    warehouseSelectRef.value.blur();
    listArr[did - 1].warehouseId = row.warehouseId;
  }

  onMounted(() => {
    onSearch();
  });
  return {
    warehouseColumns,
    warehousePagination,
    warehouseSelectValue,
    warehouseDataList,
    warehouseRowStyle,
    warehouseOnRowClick
  };
}
